<!-- 待支付成功详情页 -->
<template>
  <view class="body">
    <view class="banner"></view>
    <view class="con">
      <view class="header">
        <image class="icon" src="../../assets/images/pages2/reviewPage/reviewInfo/icon.png"></image>
        <view class="text">收款成功</view>
      </view>
      <view class="info">
        <view class="count">￥{{ Number(infoData.actualMoney).toFixed(2) }}</view>
        <view class="info">
          <view class="item"><span>承运单号</span><span class="text">{{ infoData.billNo }}</span></view>
          <view class="item"><span>下单时间</span><span class="text">{{ infoData.billingTime }}</span></view>
          <view class="item"><span>支付时间</span><span class="text">{{ infoData.fTime }}</span></view>
        </view>
        <view>
          <view class="btn btn1" @click="toReviewPage">继续收款</view>
          <view class="btn btn2" @click="toHome">返回首页</view>
        </view>
      </view>
    </view>
  </view>
</template>
    
<script lang="ts" setup>
import Taro, { useReady, useRouter } from '@tarojs/taro';
import dayjs from 'dayjs'
import { ref } from "vue";
import useOrderStore from "@/store/order";
import { getReckLogPaid } from "@/@api/waybill";



useReady(() => {
  Taro.setNavigationBarTitle({
    title: '确认订单'
  })
  Taro.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#0966FF',
  });
})

const orderStore = useOrderStore()
// console.log(orderStore.orderInfo.billNo, 'bill-billNos')
const infoData = ref({
  billNo: '',
  billingTime: '',
  fTime: '',
  actualMoney:''
}); // 详情

getReviewInfo();

// 调用审核详情接口获取审核后的详情
async function getReviewInfo() {
  const { data } = await getReckLogPaid(
    [orderStore.orderInfo.billNo] // ["250021214"]
  );
  if (data.code == 200) {
    const { billingTime: rawBillingTime, fTime: finishTime,actualMoney } = data.data[0];
    const billNo = JSON.parse(data.data[0].billNos)[0];
    const billingTime = dayjs(rawBillingTime).format("YYYY-MM-DD HH:mm:ss");
    const fTime = dayjs(finishTime).format("YYYY-MM-DD HH:mm:ss");
    const infoObj = { billNo, billingTime, fTime,actualMoney }
    infoData.value = infoObj
  }
}


// 返回待支付页面
function toReviewPage() {
  Taro.navigateTo({
    url: '/pages2/reviewToday/index'
  });
}

function toHome() {
  Taro.navigateTo({
    url: '/pages3/index/index'
  });
}


</script>
<style lang="scss" >
* {
  box-sizing: border-box;
}

.body {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 48rpx;
  margin: 0 auto;
  background: #f5f5f5;
}

.banner {
  width: 750rpx;
  height: 600rpx;
  position: relative;
  background: url('../../assets/images/pages2/reviewPage/reviewInfo/banner.png') 750rpx 600rpx #f5f5f5;
  background-size: 100% 100%;
  top: -150rpx;
  left: 0;
  box-sizing: border-box;
}

.con {
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}

.header {
  text-align: center;
  padding-top: 30rpx;

  .icon {
    width: 128rpx;
    height: 128rpx;
  }

  .text {
    font-size: 44rpx;
    color: #fff;
    margin: 15rpx 0 30rpx 0;
  }
}

.info {
  width: 678rpx;
  height: 696rpx;
  background: url('../../assets/images/pages2/reviewPage/reviewInfo/infoBox.png');
  background-size: 100% 100%;
  margin: 48rpx auto;
  text-align: center;
  padding-top: 100rpx;
  box-sizing: border-box;

  .count {
    font-weight: bold;
    color: #0966FF;
    font-size: 76rpx;
  }

  .address {
    width: 590rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .line {
      width: 142rpx;
      height: 12rpx;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .top {
      text-align: center;
      font-size: 28rpx;
      color: #252525;
    }

    .bottom {
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
  }

  .info {
    width: 606rpx;
    height: 176rpx;
    box-sizing: border-box;
    padding: 24rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
    margin-top: 48rpx;
    display: flex;
    flex-direction: column;

    .item {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;

      span {
        flex: 1;
        text-align: left;
      }

      .text {
        color: #252525;
        text-align: right;
      }
    }




  }

  .btn {
    width: 606rpx;
    height: 88rpx;
    border-radius: 88rpx;
    text-align: center;
    line-height: 88rpx;
    margin: 32rpx auto;
  }

  .btn1 {
    background: #0966FF;
    color: #fff;
  }

  .btn2 {
    border: 1rpx solid #C4C4C4;
    color: #252525;
    font-weight: bold;
  }
}
</style>